<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="deviceSeachForm">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="addId" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="deviceSeachForm.addId"
                        allow-clear
                        placeholder="开始设备ID"
                      />
                      <a-input
                        hide-button
                        v-model="deviceSeachForm.endId"
                        allow-clear
                        placeholder="结束设备ID"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input
                      v-model="deviceSeachForm.addCard"
                      placeholder="请输入开始设备号"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endCard" hide-label>
                    <a-input
                      v-model="deviceSeachForm.endCard"
                      placeholder="请输入结束设备号"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operator" hide-label>
                    <a-select
                      v-model="deviceSeachForm.operator"
                      placeholder="请选择使用运营商"
                      allow-clear
                    >
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="defaultOperator" hide-label>
                    <a-select
                      v-model="deviceSeachForm.defaultOperator"
                      placeholder="请选择默认运营商"
                      allow-clear
                    >
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="hide" hide-label>
                    <a-select
                      v-model="deviceSeachForm.hide"
                      placeholder="请选择WIFI隐藏"
                      allow-clear
                    >
                      <a-option :value="true">隐藏</a-option>
                      <a-option :value="false">不隐藏</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="deviceState" hide-label>
                    <a-select
                      v-model="deviceSeachForm.deviceState"
                      placeholder="请选择设备在线状态"
                      allow-clear
                    >
                      <a-option :value="1">在线</a-option>
                      <a-option :value="0">离线</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="wifiState" hide-label>
                    <a-select
                      v-model="deviceSeachForm.wifiState"
                      placeholder="请选择WIFI状态"
                      allow-clear
                    >
                      <a-option :value="1">正常</a-option>
                      <a-option :value="0">关闭</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="abnormalState" hide-label>
                    <a-select
                      v-model="deviceSeachForm.abnormalState"
                      placeholder="请选择异常终端"
                      allow-clear
                    >
                      <a-option :value="1">正常</a-option>
                      <a-option :value="0">异常</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="channelId" hide-label>
                    <a-select
                      v-model="deviceSeachForm.channelId"
                      placeholder="请选择设备渠道"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in deviceChannel" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="schemeId" hide-label>
                    <a-select
                      v-model="deviceSeachForm.schemeId"
                      placeholder="请选择设备方案"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in deviceScheme" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addImportTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="deviceSeachForm.addImportTime"
                      show-time
                      placeholder="请选择开始入库时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (deviceSeachForm.endImportTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endImportTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endImportTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs(
                              '01 00:00:00',
                              'DD HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endImportTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endImportTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endImportTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="deviceSeachForm.endImportTime"
                      show-time
                      placeholder="请选择结束入库时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (deviceSeachForm.endImportTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endImportTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endImportTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs(
                              '01 00:00:00',
                              'DD HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endImportTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (deviceSeachForm.addImportTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endImportTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addReportingTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="deviceSeachForm.addReportingTime"
                      show-time
                      placeholder="请选择开始上报时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs(
                              '00:00:00',
                              'HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime = $dayjs(
                              '23:59:59',
                              'HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime =
                              $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs(
                              '01 00:00:00',
                              'DD HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime =
                              $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endReportingTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="deviceSeachForm.endReportingTime"
                      show-time
                      placeholder="请选择结束上报时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs(
                              '00:00:00',
                              'HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime = $dayjs(
                              '23:59:59',
                              'HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime =
                              $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs(
                              '01 00:00:00',
                              'DD HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime =
                              $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (deviceSeachForm.addReportingTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endReportingTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addOnlineTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="deviceSeachForm.addOnlineTime"
                      show-time
                      placeholder="请选择开始入库时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (deviceSeachForm.endOnlineTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endOnlineTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endOnlineTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs(
                              '01 00:00:00',
                              'DD HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endOnlineTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endOnlineTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endOnlineTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="deviceSeachForm.endOnlineTime"
                      show-time
                      placeholder="请选择结束入库时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (deviceSeachForm.endOnlineTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endOnlineTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endOnlineTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs(
                              '01 00:00:00',
                              'DD HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endOnlineTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (deviceSeachForm.addOnlineTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endOnlineTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addSwitchingTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="deviceSeachForm.addSwitchingTime"
                      show-time
                      placeholder="请选择开始入库时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs(
                              '00:00:00',
                              'HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime = $dayjs(
                              '23:59:59',
                              'HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime =
                              $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs(
                              '01 00:00:00',
                              'DD HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime =
                              $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endSwitchingTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="deviceSeachForm.endSwitchingTime"
                      show-time
                      placeholder="请选择结束入库时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs(
                              '00:00:00',
                              'HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime = $dayjs(
                              '23:59:59',
                              'HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime =
                              $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs(
                              '01 00:00:00',
                              'DD HH:mm:ss'
                            ).format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime =
                              $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (deviceSeachForm.addSwitchingTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (deviceSeachForm.endSwitchingTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button type="primary" html-type="submit" @click="doRefresh(1)"
                        ><template #icon> <icon-search /> </template>搜索</a-button
                      >
                      <a-button @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button type="primary" @click="openStore"> 入库 </a-button>
          <a-button type="outline" @click="exportDeviceFn" :loading="loading"> 导出 </a-button>
          <a-button type="outline" @click="openBatch"> 批量操作 </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="tableLoading"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="tableColumnDevice"
          table-layout-fixed
          :show-empty-tree="false"
          :hide-expand-button-on-empty="true"
          :default-expand-all-rows="false"
          :isLeaf="false"
          :scroll="{ x: 1200 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          @row-click="handleRowClick"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumnDevice"
              :key="item.key"
              :align="item.align"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'equipmentNo'" #cell="{ record }">
                <div class="text1">{{ record.equipmentNo }}</div>
                <div class="text2">使用中：卡槽{{ record.slot }}{{ record.operatorType1 }}</div>
                <div class="text2"
                  >卡槽数：{{ record.wifiDeviceScheme.cardSlotArr.length }} 默认{{
                    record.operatorType2
                  }}</div
                >
              </template>
              <template v-if="item.key === 'WIFIInfo'" #cell="{ record }">
                <div class="text1"
                  >{{ record.wifiBand ? record.wifiBandName : '暂无' }}/{{
                    record.wifiName ? record.wifiName : '暂无名称'
                  }}</div
                >
                <div class="text2"
                  >密码：{{ record.wifiPassword ? record.wifiPassword : '无' }}</div
                >
                <div class="text2"
                  ><span
                    >状态：<a-switch
                      size="small"
                      @change="changeWifiState(record)"
                      v-model="record.wifiState"
                      :checked-value="1"
                      :unchecked-value="0"
                  /></span>
                  <span style="margin-left: 10px">
                    隐藏：<a-switch
                      size="small"
                      @change="changeWifiHide(record)"
                      v-model="record.hide"
                      :checked-value="true"
                      :unchecked-value="false"
                  /></span>
                </div>
              </template>
              <template v-if="item.key === 'deviceInfo'" #cell="{ record }">
                <div class="text1">状态：{{ record.deviceState == 1 ? '在线' : '离线' }}</div>
                <div class="text2">信号：{{ record.rssi ? record.rssi : 0 }}</div>
                <div class="text2"
                  >电量：{{ record.electricQuantity ? record.electricQuantity + '%' : '未知' }}
                </div>
              </template>
              <template v-if="item.key === 'number'" #cell="{ record }">
                {{ record.connectionsNumber ? record.connectionsNumber : 0 }}
              </template>
              <template v-if="item.key === 'abnormalState'" #cell="{ record }">
                <a-tag color="blue" v-if="record.abnormalState == 1">正常</a-tag>
                <a-tag v-else>异常</a-tag>
              </template>
              <template v-if="item.key === 'reportingTime'" #cell="{ record }">
                {{ record.reportingTime ? record.reportingTime : '- - -' }}
              </template>
              <template v-if="item.key === 'onlineTime'" #cell="{ record }">
                {{ record.onlineTime ? record.onlineTime : '- - -' }}
              </template>
              <template v-if="item.key === 'switchingTime'" #cell="{ record }">
                {{ record.switchingTime ? record.switchingTime : '- - -' }}
              </template>
              <template v-if="item.key === 'deviceChannel'" #cell="{ record }">
                {{ record.wifiDeviceChannel.name }}
              </template>
              <template v-if="item.key === 'remarks'" #cell="{ record }">
                {{ record.remarks ? record.remarks : '- - -' }}
              </template>
              <template v-if="item.key === 'action'" #cell="{ record }">
                <a-space style="display: flex; flex-wrap: wrap">
                  <a-button size="small" type="text" class="butten" @click="openDetail(record.id)">
                    详情
                  </a-button>
                  <a-button size="small" type="text" class="butten" @click="openWifi(record)">
                    设置
                  </a-button>
                  <a-button size="small" type="text" class="butten" @click="restartFn(record, 0)">
                    重启
                  </a-button>
                  <a-button size="small" type="text" class="butten" @click="shutDownFn(record, 0)">
                    关机
                  </a-button>
                  <a-button size="small" type="text" class="butten" @click="openChange(record)">
                    切卡
                  </a-button>
                  <a-button
                    size="small"
                    type="text"
                    class="butten"
                    @click="RefreshFn(record.id, 0)"
                  >
                    限速
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" />
      </template>
    </TableBody>
    <!-- 入库弹窗 -->
    <a-modal
      v-model:visible="storeVisible"
      title="入库设备"
      :mask-closable="false"
      title-align="start"
      @before-close="closeDown"
    >
      <div class="box-top">
        <div>1：设备套餐，单网可以做26号清零，多网禁止做26号清零套餐。</div>
        <div style="margin-top: 20px">2：导入有问题请联系公司售后</div>
      </div>
      <a-row :gutter="24" style="margin-top: 20px">
        <a-col :span="11">
          <a-button class="width100" @click="downloadStore">下载入库模板</a-button>
        </a-col>
        <a-col :span="2">
          <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
        </a-col>
        <a-col :span="11">
          <a-upload
            ref="sslU"
            :data="{
              ...storeForm,
              wifiDeviceScheme: JSON.stringify(storeForm.wifiDeviceScheme),
            }"
            action="/app/admin/device/import"
            :auto-upload="false"
            :limit="1"
            :file-list="fileList"
            @success="onSsl"
            @error="onError"
          >
            <template #upload-button>
              <a-button style="width: 100%" type="primary" class="width100">导入入库文件</a-button>
            </template>
          </a-upload>
        </a-col>
      </a-row>
      <a-select
        style="width: 100%; margin-top: 20px"
        v-model="storeForm.channelId"
        placeholder="请选择设备渠道"
        allow-clear
        allow-search
      >
        <a-option v-for="item in deviceChannel" :key="item.id" :value="item.id">{{
          item.name
        }}</a-option>
      </a-select>
      <a-select
        style="width: 100%; margin-top: 20px"
        v-model="storeForm.wifiDeviceScheme.id"
        placeholder="请选择设备方案"
        allow-clear
        @change="opNameFn"
        allow-search
      >
        <a-option v-for="item in deviceScheme" :key="item.id" :value="item.id">{{
          item.name
        }}</a-option>
      </a-select>
      <div v-if="storeForm.wifiDeviceScheme.cardSlotArr.length > 0">
        <div
          v-for="item in storeForm.wifiDeviceScheme.cardSlotArr"
          :key="item.slot"
          style="display: flex"
        >
          <div style="width: 25%; margin-right: 10px; margin-top: 20px" class="radio-bcg">{{
            item.slot
          }}</div>
          <a-select
            style="width: 100%; margin-top: 20px"
            v-model="item.seriesId"
            placeholder="请选择卡槽系列"
            allow-clear
            allow-search
          >
            <a-option v-for="items in deviceSeries" :key="items.id" :value="items.id">{{
              items.name
            }}</a-option>
          </a-select>
        </div>
      </div>
      <a-input
        style="margin-top: 20px"
        placeholder="请输入设备备注"
        v-model.trim="storeForm.remarks"
      />
      <template #footer>
        <a-space>
          <a-button @click="closeDown">取消</a-button>
          <a-button type="primary" @click="submit">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 设备详情 -->
    <a-drawer
      :width="1032"
      title="设备详情"
      v-model:visible="detailVisible"
      :footer="false"
      unmountOnClose
    >
      <div class="padding20">
        <div class="box">
          <div class="line"></div>
          <div class="text">基本信息 </div>
        </div>
      </div>
      <a-row class="padding20">
        <a-col :span="12">
          <div class="display-box">
            <img
              class="imgsa1"
              v-if="deviceDetail.operatorId == 0"
              src="@/assets/yd.png"
              alt="avatar"
            />
            <img
              class="imgsa1"
              v-if="deviceDetail.operatorId == 1"
              src="@/assets/lt.png"
              alt="avatar"
            />
            <img
              class="imgsa1"
              v-if="deviceDetail.operatorId == 2"
              src="@/assets/dx.png"
              alt="avatar"
            />
            <img
              class="imgsa1"
              v-if="deviceDetail.operatorId == 3"
              src="@/assets/gd.png"
              alt="avatar"
            />
            <div class="display-right">
              <div class="text-name"
                >设备号：{{ deviceDetail.equipmentNo }}
                <img
                  @click="correctId(detail)"
                  style="width: 15px; height: 15px; margin-left: 10px"
                  src="@/assets/sb.png"
              /></div>
              <div class="text">设备ID：{{ deviceDetail.id }}</div>
              <div class="text">入库时间：{{ deviceDetail.importTime }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div style="float: right">
            <div>
              <a-space style="float: right">
                <a-button class="width75px" size="small" @click="previousFn"> 上一张</a-button>
                <a-button class="width75px" size="small" @click="nextFn"> 下一张 </a-button>
                <!-- <a-button
                  class="width75px"
                  type="primary"
                  status="warning"
                  size="small"
                  @click="stopFn(deviceDetail.id, 1)"
                  >停机</a-button
                >
                <a-button
                  class="width75px"
                  type="primary"
                  size="small"
                  @click="startFn(deviceDetail.id, 1)"
                  >复机</a-button
                > -->
              </a-space>
            </div>
            <div class="white" style="margin-top: 14px; float: right">
              <a-space>
                <!-- <a-button size="small" class="width75px" @click="RefreshFn(deviceDetail, 1)"
                  >刷新设备</a-button
                > -->
                <a-button size="small" class="width75px" @click="openWifi(deviceDetail)"
                  >修改WIFI</a-button
                >
                <a-button size="small" class="width75px" @click="openChange(deviceDetail)"
                  >切换网络</a-button
                >
                <a-button size="small" class="width75px" @click="restartFn(deviceDetail, 1)"
                  >设备重启</a-button
                >
                <a-button size="small" class="width75px" @click="shutDownFn(deviceDetail, 1)"
                  >设备关机</a-button
                >
                <a-button size="small" class="width75px" @click="factorySettingsFn(deviceDetail, 1)"
                  >恢复出厂</a-button
                >
              </a-space>
            </div>
          </div>
        </a-col>
      </a-row>
      <div
        style="
          margin-top: 20px;
          border-top: 1px solid #f2f3f5;
          border-bottom: 1px solid #f2f3f5;
          padding: 20px 0;
        "
      >
        <a-grid :cols="6" :colGap="12" :rowGap="16" class="grid-demo-grid padding20">
          <a-grid-item class="demo-item">
            <div class="text-name">所属客户</div>
            <div class="text-info">
              <span v-if="deviceDetail.user">{{ deviceDetail.user.userName }}</span>
              <span v-else>- - - - </span>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">设备状态</div>
            <div class="text-info">
              {{ deviceDetail.deviceState == 1 ? '在线' : '离线' }}
              <img
                @click="RefreshFn(deviceDetail.id, 1)"
                style="width: 15px; height: 15px; margin-left: 10px"
                src="@/assets/b.png"
              />
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">当前卡槽</div>
            <div class="text-info">
              卡槽{{ deviceDetail.slot }}/{{ deviceDetail.operatorType1 }}
              <img
                @click="RefreshFn(deviceDetail.id, 1)"
                style="width: 15px; height: 15px; margin-left: 10px"
                src="@/assets/b.png"
              />
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">默认卡槽</div>
            <div class="text-info">
              卡槽{{ deviceDetail.wifiDeviceScheme.defaultSlot }}/{{ deviceDetail.operatorType2 }}
              <img
                @click="RefreshFn(deviceDetail.id, 1)"
                style="width: 15px; height: 15px; margin-left: 10px"
                src="@/assets/b.png"
              />
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">设备信号</div>
            <div class="text-info">
              {{ deviceDetail.rssi ? deviceDetail.rssi : 0 }}
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">设备电量</div>
            <div class="text-info">
              {{ deviceDetail.electricQuantity ? deviceDetail.electricQuantity + '%' : '未知' }}
            </div>
          </a-grid-item>
        </a-grid>
      </div>
      <div class="tabs-button padding20">
        <a-radio-group style="width: 100%" v-model="key" type="button">
          <a-radio value="device">设备详情</a-radio>
          <a-radio value="flow">设备日志</a-radio>
          <a-radio value="operate">推送日志</a-radio>
        </a-radio-group>
      </div>
      <div v-if="key == 'device'" class="col-div">
        <!-- 设备卡槽 -->
        <a-table
          :columns="cardColumns"
          :pagination="false"
          :data="deviceDetail.cards"
          :scroll="{ x: 1200 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          style="margin-bottom: 20px"
        >
          <template #columns>
            <a-table-column
              v-for="item of cardColumns"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :ellipsis="true"
              :tooltip="true"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'card'" #cell="{ record }">
                <div class="ba">
                  <img class="imgsa" v-if="record.operator == 0" src="@/assets/yd.png" alt="" />
                  <img class="imgsa" v-if="record.operator == 1" src="@/assets/lt.png" alt="" />
                  <img class="imgsa" v-if="record.operator == 2" src="@/assets/dx.png" alt="" />
                  <img class="imgsa" v-if="record.operator == 3" src="@/assets/gd.png" alt="" />
                  <span>{{ record.iccid }}</span>
                </div>
              </template>
              <template v-if="item.key === 'imei'" #cell="{ record }">
                <span>{{ record.imei ? record.imei : '- - -' }}</span>
              </template>
              <template v-if="item.key === 'cardState1'" #cell="{ record }">
                <span v-if="record.cardState == '使用中'" style="color: #3491fa">{{
                  record.cardState
                }}</span>
                <span v-else>{{ record.cardState }}</span>
                <span v-if="record.cardState1 !== ''">/</span>
                <span v-if="record.cardState1 !== ''" style="color: #3491fa">{{
                  record.cardState1
                }}</span>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <span>{{ record.stateName.name }}</span>
              </template>
              <template v-if="item.key === 'use'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.upstreamFlow) }}</span>
              </template>
              <template v-if="item.key === 'time'" #cell="{ record }">
                <span v-if="record.online == 0">在线</span>
                <span v-else-if="record.online == 1">离线</span>
                <span v-else>未知</span>
              </template>
              <template v-if="item.key === 'officialRealName'" #cell="{ record }">
                <span color="blue" v-if="record.officialRealName == 0">已实名</span>
                <span v-else-if="record.officialRealName == 1">未实名</span>
                <span v-else>未知</span>
              </template>
              <template v-if="item.key === 'action'" #cell="{ record }">
                <a-button
                  size="small"
                  type="text"
                  class="butten"
                  @click="RefreshFn(deviceDetail.id, 1)"
                >
                  刷新
                </a-button>
                <a-button
                  size="small"
                  type="text"
                  class="butten"
                  @click="startFn(deviceDetail.id, 1)"
                >
                  复机
                </a-button>
                <a-button
                  size="small"
                  type="text"
                  class="butten"
                  @click="stopFn(deviceDetail.id, 1)"
                >
                  停机
                </a-button>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div class="box">
          <div class="line"></div>
          <div class="text">设备信息 </div>
        </div>
        <a-row>
          <a-col :span="12">
            上报时间：{{ deviceDetail.reportingTime ? deviceDetail.reportingTime : '- - -' }}
          </a-col>
          <a-col :span="12">
            上线时间：{{ deviceDetail.onlineTime ? deviceDetail.onlineTime : '- - -' }}
          </a-col>
          <a-col :span="12">
            切卡时间：{{ deviceDetail.switchingTime ? deviceDetail.switchingTime : '- - -' }}
          </a-col>
          <a-col :span="12"> 设备渠道：{{ deviceDetail.wifiDeviceChannel.name }} </a-col>
          <a-col :span="12"> 设备方案：{{ deviceDetail.wifiDeviceScheme.name }} </a-col>
          <a-col :span="12">
            设备备注：{{ deviceDetail.remarks ? deviceDetail.remarks : '- - -' }}
          </a-col>
        </a-row>
        <div class="box">
          <div class="line"></div>
          <div class="text"
            >WIFI频段/{{ deviceDetail.wifiBand ? deviceDetail.wifiBandName : '暂无' }}
          </div>
        </div>
        <a-row>
          <a-col :span="12">
            WIFI账号：{{ deviceDetail.wifiName ? deviceDetail.wifiName : '暂无名称' }}
          </a-col>
          <a-col :span="12">
            WIFI密码：{{ deviceDetail.wifiPassword ? deviceDetail.wifiPassword : '无' }}
          </a-col>
          <a-col :span="12"> WIFI状态：{{ deviceDetail.wifiState == 1 ? '开启' : '关闭' }} </a-col>
          <a-col :span="12"> 隐藏热点：{{ deviceDetail.hide == 1 ? '是' : '否' }} </a-col>
        </a-row>
      </div>
    </a-drawer>
    <!-- 切卡 -->
    <a-modal
      v-model:visible="changeVisible"
      title="切换卡槽"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form>
        <a-form-item field="value1" label="默认卡槽">
          <div class="radio-bcg"
            >卡槽{{ changeForm.defaultSlot }}{{ changeForm.operatorType2 }}
          </div>
        </a-form-item>
        <a-form-item field="value1" label="当前使用">
          <div class="radio-bcg">卡槽{{ changeForm.slot }}{{ changeForm.operatorType1 }} </div>
        </a-form-item>
        <div class="operatorClass">
          <a-form-item field="operator" label="运营商">
            <a-radio-group v-model="changeForm.operator">
              <a-radio v-for="item in operatorList" :key="item.slot" :value="item.slot">
                <template #radio="{ checked }">
                  <div
                    :checked="checked"
                    class="custom-radio-card"
                    :class="{ 'custom-radio-card-checked': checked }"
                  >
                    <img
                      v-if="checked"
                      style="position: absolute; right: 0px; bottom: 0; width: 15px; height: 15px"
                      src="@/assets/right-dui.png"
                      alt=""
                    />
                    <img v-if="item.operator == 0" class="imgRadio" src="@/assets/yd.png" alt="" />
                    <img v-if="item.operator == 1" class="imgRadio" src="@/assets/lt.png" alt="" />
                    <img v-if="item.operator == 2" class="imgRadio" src="@/assets/dx.png" alt="" />
                    <img v-if="item.operator == 3" class="imgRadio" src="@/assets/gd.png" alt="" />
                    {{
                      item.operator == 0
                        ? '移动'
                        : item.operator == 1
                        ? '联通'
                        : item.operator == 2
                        ? '电信'
                        : '广电'
                    }}
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </div>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="changeClose">取消</a-button>
          <a-button type="primary" @click="submitChange">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- WIFI设置 -->
    <a-modal
      v-model:visible="wifiVisible"
      title="WIFI设置"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form>
        <a-form-item field="wifiName" label="WIFI名称">
          <a-input v-model="wifiForm.wifiName" placeholder="请输入WIFI名称" allow-clear />
        </a-form-item>
        <a-form-item field="wifiPassword" label="WIFI密码">
          <a-input v-model="wifiForm.wifiPassword" placeholder="请输入WIFI密码" allow-clear>
            <template #suffix>
              <span @click="clickSjs" style="color: rgb(var(--primary-6)); cursor: pointer"
                >随机密码</span
              >
            </template>
          </a-input>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="wifiClose">取消</a-button>
          <a-button type="primary" @click="submitWifi">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 入库进度 -->
    <a-modal
      v-model:visible="progressShow"
      title="执行进度"
      width="600px"
      @before-close="progressCel"
      :mask-closable="false"
      title-align="start"
    >
      <a-progress :percent="progress / 100" />
      <template #footer>
        <a-space>
          <a-button @click="progressCel">取消</a-button>
          <a-button type="primary" @click="progressCel">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 批量操作 -->
    <a-modal
      v-model:visible="batchShow"
      title="批量操作"
      width="40%"
      :mask-closable="false"
      title-align="start"
      :footer="false"
      @before-close="closeBatch"
    >
      <div class="pilianglokolo">
        <a-tabs v-model:active-key="activeBatch" type="line" position="left" @tab-click="tabClicks">
          <a-tab-pane key="delete" title="设备删除">
            <a-form ref="batchRef" :model="batchForm" :auto-label-width="true">
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始设备号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始设备号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束设备号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束设备号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入设备号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item field="type" label="删除备注" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input v-model="batchForm.remarks" placeholder="请输入删除备注" allow-clear />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" long @click="batchDelete(0)">立即检测</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="channel" title="修改渠道">
            <a-form ref="batchChannelRef" :model="batchForm" :auto-label-width="true">
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始设备号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始设备号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束设备号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束设备号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '设备号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入设备号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item field="type" label="变更渠道" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-select
                      v-model="batchForm.channelId"
                      placeholder="请选择设备渠道"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in deviceChannel" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item field="type" label="变更备注" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input v-model="batchForm.remarks" placeholder="请输入变更备注" allow-clear />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" long @click="batchChannel(0)">立即检测</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="scheme" title="修改方案">
            <a-form ref="batchSchemeRef" :model="batchForm" :auto-label-width="true">
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始设备号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始设备号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束设备号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束设备号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '设备号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入设备号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item field="type" label="变更方案" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-select
                      v-model="batchForm.schemeId"
                      placeholder="请选择设备方案"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in deviceScheme" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item field="type" label="变更备注" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input v-model="batchForm.remarks" placeholder="请输入变更备注" allow-clear />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" long @click="batchScheme(0)">立即检测</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>
    <!-- 设备操作 -->
    <a-modal
      v-model:visible="stepVisible"
      :title="'设备' + operateName"
      width="640px"
      title-align="start"
    >
      <div>
        <a-steps :current="stepCurrent" status="finish" @change="setCurrent">
          <a-step description="本次操作检测结果">步骤一</a-step>
          <a-step description="不超过1000张自动跳过">步骤二</a-step>
          <a-step description="操作成功">步骤三</a-step>
        </a-steps>
        <div v-if="stepCurrent == 1" class="step1">
          <div class="top"> 注意：以下数据已去除重复卡，空卡号和不存在的卡 </div>
          <a-alert v-if="operateName != '删除'" type="normal" class="alert-text" :show-icon="false"
            >{{ operateName }}总数量：{{ jianceForm.total }}张</a-alert
          >
          <a-alert
            type="error"
            v-if="operateName != '删除'"
            class="alert-text"
            :show-icon="false"
            style="margin-top: 20px"
            >不可{{ operateName }}：{{ jianceForm.error }}张</a-alert
          >
          <a-alert
            type="error"
            v-if="operateName == '删除'"
            class="alert-text"
            :show-icon="false"
            style="margin-top: 20px"
            >{{ operateName }}数量：{{ jianceForm.total }}张</a-alert
          >
          <a-alert
            v-if="operateName != '删除'"
            :show-icon="false"
            class="alert-text"
            style="margin-top: 20px; background-color: #e8f7ff"
            >可{{ operateName }}：{{ jianceForm.success }}张</a-alert
          >
        </div>
        <div v-if="stepCurrent == 3" class="step1">
          <div class="top"> 注意：以下数据已去除重复卡，空卡号和不存在的卡 </div>
          <a-alert v-if="operateName != '删除'" type="normal" class="alert-text" :show-icon="false"
            >{{ operateName }}总数量：{{ jianceForm.total }}张</a-alert
          >
          <a-alert
            type="error"
            v-if="operateName != '删除'"
            class="alert-text"
            :show-icon="false"
            style="margin-top: 20px"
            >{{ operateName }}失败：{{ jianceForm.error }}张</a-alert
          >
          <a-alert
            type="error"
            v-if="operateName == '删除'"
            class="alert-text"
            :show-icon="false"
            style="margin-top: 20px"
            >{{ operateName }}数量：{{ jianceForm.total }}张</a-alert
          >
          <a-alert
            v-if="operateName != '删除'"
            :show-icon="false"
            class="alert-text"
            style="margin-top: 20px; background-color: #e8f7ff"
            >{{ operateName }}成功：{{ jianceForm.success }}张</a-alert
          >
        </div>
        <div v-if="stepCurrent == 2" class="step1">
          <div style="display: flex; margin-top: 20px">
            <a-alert
              v-if="operateName != '删除'"
              type="normal"
              class="alert-text"
              :show-icon="false"
              >{{ operateName }}总数量：{{ jianceForm.total }}张</a-alert
            >
            <a-alert
              v-if="operateName != '删除'"
              type="error"
              class="alert-text"
              :show-icon="false"
              style="margin: 0 20px"
              >不可{{ operateName }}：{{ jianceForm.error }}张</a-alert
            >
            <a-alert v-if="operateName == '删除'" type="error" class="alert-text" :show-icon="false"
              >{{ operateName }}数量：{{ jianceForm.total }}张</a-alert
            >
            <a-alert
              v-if="operateName != '删除'"
              :show-icon="false"
              class="alert-text"
              style="background-color: #e8f7ff"
              >可{{ operateName }}：{{ jianceForm.success }}张</a-alert
            >
          </div>
          <a-alert style="margin-top: 20px" :show-icon="false" type="warning"
            ><div>正在进行操作卡板分销，该操作不可逆。 </div
            ><div>一旦操作成功数据将会改变。请输入下面内容再次确认操作。</div></a-alert
          >
          <div style="padding: 20px 0"><a-divider dashed>确认操作</a-divider></div>
          <a-input
            v-model="errorValue"
            placeholder="请输入'确认操作'后，点击确定"
            :error="error"
            onpaste="return false"
          />
          <div style="font-size: 11px; margin-top: 10px; color: #656565"
            >当前操作只有在操作数量超过1000张的时候才会出现，只是为了避免操作失误</div
          >
        </div>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="stepsClose">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="conset">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import useCommonStore from '@/store/modules/common'
  import { post, formpost, get } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'

  const useCommon = useCommonStore()
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const tableLoading = ref(false)
  const table = useTable()
  const rowKey = useRowKey('id')
  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }
  //设备操作
  const stepVisible = ref(false)
  const operateName = ref('')
  const jianceForm: any = ref({
    repeats: [],
    notExists: [],
  })
  const stepCurrent = ref(1)
  //切换
  function setCurrent(current: any) {
    stepCurrent.value = current
  }

  //批量操作
  const batchShow = ref(false)
  const activeBatch = ref('delete')
  const batchList: any = ref([])
  const intervalId = ref()
  function openBatch() {
    batchShow.value = true
  }

  function tabClicks(val: any) {
    clearInterval(intervalId.value)
  }

  function closeBatch() {
    clearInterval(intervalId.value)
    batchList.value = []
    batchShow.value = false
  }

  const batchForm = ref({
    addCard: '',
    endCard: '',
    cardMultiline: '',
    remarks: '',
    channelId: '',
    schemeId: '',
  })

  const batchChecked = ref('orderly')

  //批量操作删除设备 检测/删除
  const batchRef = ref()
  function batchDelete(val: any) {
    batchRef.value?.validate().then((error: any) => {
      if (!error) {
        if (batchChecked.value == 'disOrder') {
          formpost({
            url: '/app/admin/device/del',
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
                check: val == 1 ? false : true,
                remarks: batchForm.value.remarks,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  //批量操作变更渠道 检测/变更
  const batchChannelRef = ref()
  function batchChannel(val: any) {
    batchChannelRef.value?.validate().then((error: any) => {
      if (!error) {
        if (batchChecked.value == 'disOrder') {
          formpost({
            url: '/app/admin/device/update/channelId',
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
                check: val == 1 ? false : true,
                remarks: batchForm.value.remarks,
                channelId: batchForm.value.channelId,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  //批量操作变更方案 检测/变更
  const batchSchemeRef = ref()
  function batchScheme(val: any) {
    batchSchemeRef.value?.validate().then((error: any) => {
      if (!error) {
        if (batchChecked.value == 'disOrder') {
          formpost({
            url: '/app/admin/device/update/schemeId',
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
                check: val == 1 ? false : true,
                remarks: batchForm.value.remarks,
                schemeId: batchForm.value.schemeId,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  //执行进度条
  const progressShow = ref(false)
  function progressCel() {
    progressShow.value = false
    if (progress.value < 100) {
      Message.success('程序将在后台继续执行')
    }
  }
  const progress = ref(0)
  function pollProgress(val: any) {
    const interval = setInterval(() => {
      get({
        url: '/app/file/progress/' + val,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data.status == 'NOT_FOUND') {
            Message.error('没有该进程')
            clearInterval(interval)
          } else if (res.data.status == 'ERROR') {
            Message.error(res.data.error)
            clearInterval(interval)
          } else {
            progressShow.value = true
            progress.value = res.data.progress
            if (progress.value >= 100) {
              clearInterval(interval)
            } else if (progress.value === -1) {
              clearInterval(interval)
            }
          }
        }
      })
    }, 1000)
  }

  //修改wifi状态
  function changeWifiState(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要改变WIFI状态吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        post({
          url: '/app/admin/device/wifi/state',
          data: () => {
            return {
              wifiState: item.wifiState,
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
      },
      onCancel() {
        doRefresh()
      },
    })
  }
  //修改wifi隐藏
  function changeWifiHide(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要改变WIFI隐藏吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        post({
          url: '/app/admin/device/wifi/hide',
          data: () => {
            return {
              hide: item.hide,
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
      },
      onCancel() {
        doRefresh()
      },
    })
  }

  //切卡
  const changeVisible = ref(false)

  const changeForm = ref({
    id: 0,
    slot: 1,
    operatorType1: '',
    operatorType2: '',
    defaultSlot: 1,
    operator: 0,
  })

  const operatorList: any = ref([])

  function openChange(val: any) {
    changeForm.value.id = val.id
    changeForm.value.slot = val.slot
    changeForm.value.operator = val.slot
    changeForm.value.defaultSlot = val.wifiDeviceScheme.defaultSlot
    changeForm.value.operatorType1 = val.operatorType1
    changeForm.value.operatorType2 = val.operatorType2
    operatorList.value = val.wifiDeviceScheme.cardSlotArr
    detailVisible.value = false
    changeVisible.value = true
  }

  function submitChange() {
    post({
      url: '/app/admin/device/wifi/switching',
      data: {
        ...changeForm.value,
        slot: changeForm.value.operator,
      },
    })
      .then((res) => {
        Message.success(res.msg)
        doRefresh()
        changeClose()
      })
      .catch(() => {
        tables.tableLoading = false
      })
  }

  function changeClose() {
    changeForm.value = {
      id: 0,
      slot: 1,
      operatorType1: '',
      operatorType2: '',
      defaultSlot: 1,
      operator: 0,
    }
    changeVisible.value = false
  }
  //修改WIFI
  const wifiVisible = ref(false)

  const wifiForm = ref({
    id: 0,
    wifiName: '',
    wifiPassword: '',
  })

  function openWifi(val: any) {
    wifiForm.value.id = val.id
    wifiForm.value.wifiName = val.wifiName
    wifiForm.value.wifiPassword = val.wifiPassword
    detailVisible.value = false
    wifiVisible.value = true
  }

  function submitWifi() {
    post({
      url: '/app/admin/device/wifi/update',
      data: {
        ...wifiForm.value,
      },
    })
      .then((res) => {
        Message.success(res.msg)
        doRefresh()
        wifiClose()
      })
      .catch(() => {
        tables.tableLoading = false
      })
  }

  function wifiClose() {
    wifiForm.value = {
      id: 0,
      wifiName: '',
      wifiPassword: '',
    }
    wifiVisible.value = false
  }

  function clickSjs() {
    let code = ''
    let characters = 'abcdefghijklmnopqrstuvwxyz'
    characters += '0123456789'
    for (let i = 0; i < 8; i++) {
      code += characters.charAt(Math.floor(Math.random() * characters.length))
    }
    wifiForm.value.wifiPassword = code //把code值赋给data中定义好的password
  }
  //设备详情
  const detailVisible = ref(false)

  const deviceDetail: any = ref({})
  const tableIndex = ref(0)
  function handleRowClick(record: any) {
    // 获取行的下标
    tableIndex.value = table.dataList.findIndex((element: any) => element.id === record.id)
  }
  //上一个
  function previousFn() {
    tableIndex.value--
    if (tableIndex.value < 0) {
      tableIndex.value = table.dataList.length - 1
      getDetail(table.dataList[tableIndex.value].id)
    } else {
      getDetail(table.dataList[tableIndex.value].id)
    }
    key.value = 'device'
  }
  //下一个
  function nextFn() {
    tableIndex.value++
    if (tableIndex.value > table.dataList.length - 1) {
      tableIndex.value = 0
      getDetail(table.dataList[tableIndex.value].id)
    } else {
      getDetail(table.dataList[tableIndex.value].id)
    }
    key.value = 'device'
  }

  //tab切换
  const key = ref('device')

  //卡板列表
  const cardColumns = ref([
    {
      title: '设备卡槽',
      key: 'card',
      width: 220,
    },
    {
      title: 'IMEI',
      key: 'imei',
    },
    {
      title: '卡槽状态',
      key: 'cardState1',
    },
    {
      title: '官方实名',
      key: 'officialRealName',
    },
    {
      title: '卡板状态',
      key: 'state',
    },
    {
      title: '在线状态',
      key: 'time',
    },
    {
      title: '上游已用',
      key: 'use',
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 150,
    },
  ])

  //打开设备详情弹窗
  function openDetail(val: any) {
    getDetail(val)
  }

  function getDetail(val: any) {
    get({
      url: '/app/admin/device/get/info',
      data: () => {
        return {
          id: val,
        }
      },
    })
      .then((res) => {
        if (res.data.wifiBand) {
          deviceBandList.value.forEach((items) => {
            if (res.data.wifiBand == items.key) {
              res.data.wifiBandName = items.name
            }
          })
        }
        // 创建一个以 slot 为键的对象映射
        const cardSlotArr = res.data.wifiDeviceScheme.cardSlotArr
        const slotOperatorMap: Record<string, string | undefined> = {}
        cardSlotArr.forEach((element: any) => {
          slotOperatorMap[element.slot] = element.operator
        })

        // 在用运营商
        const currentSlot = res.data.slot
        const operator = slotOperatorMap[currentSlot]

        // 默认运营商
        const defaultSlot = res.data.wifiDeviceScheme.defaultSlot
        const operator1 = slotOperatorMap[defaultSlot]

        res.data.cards.forEach((item: any) => {
          // 使用对象映射查找 operator
          res.data.wifiDeviceScheme.cardSlotArr.forEach((element: any) => {
            if (item.slot == element.slot) {
              item.operator = element.operator
            }
            if (item.slot == element.slot) {
              item.operator = element.operator
            }
          })

          // 设置 cardState
          item.cardState = item.slot === currentSlot ? '使用中' : '未使用'

          // 设置 cardState1
          item.cardState1 = item.slot === defaultSlot ? '默认' : ''
          useCommon.state.forEach((val: any) => {
            if (item.state == val.state) {
              item.stateName = val
            }
          })
        })

        res.data.operatorId = operator
        res.data.operatorIds = operator1
        console.log(operator1)
        res.data.operatorType1 =
          operator == 0 || operator == 1 || operator == 2 || operator == 3
            ? useCommon.getOperatorType(operator)
            : null
        res.data.operatorType2 =
          operator1 == 0 || operator1 == 1 || operator1 == 2 || operator1 == 3
            ? useCommon.getOperatorType(operator1)
            : null

        deviceDetail.value = res.data
        detailVisible.value = true
      })
      .catch(console.log)
  }
  //设备列表
  const deviceSeachForm: any = ref({
    addId: '',
    endId: '',
    addCard: '',
    endCard: '',
    operator: '',
    defaultOperator: '',
    hide: '',
    deviceState: '',
    wifiState: '',
    abnormalState: '',
    channelId: '',
    schemeId: '',
    addImportTime: '',
    endImportTime: '',
    addReportingTime: '',
    endReportingTime: '',
    addOnlineTime: '',
    endOnlineTime: '',
    addSwitchingTime: '',
    endSwitchingTime: '',
  })

  const deviceSeachRef = ref()
  const pagination = usePagination(doRefresh)
  //设备列表项
  const tableColumnDevice: any = ref([
    {
      title: '设备ID',
      key: 'id',
      dataIndex: 'id',
      checked: true,
      width: 120,
    },
    {
      title: '设备号',
      key: 'equipmentNo',
      dataIndex: 'equipmentNo',
      checked: true,
      width: 200,
    },
    {
      title: 'WIFI信息',
      key: 'WIFIInfo',
      dataIndex: 'WIFIInfo',
      checked: true,
      width: 200,
    },
    {
      title: '设备信息',
      key: 'deviceInfo',
      dataIndex: 'deviceInfo',
      checked: true,
      width: 200,
    },
    {
      title: '连接数量',
      key: 'number',
      dataIndex: 'number',
      checked: true,
      width: 100,
    },
    {
      title: '异常终端',
      key: 'abnormalState',
      dataIndex: 'abnormalState',
      checked: true,
      width: 100,
    },
    {
      title: '入库时间',
      key: 'importTime',
      dataIndex: 'importTime',
      checked: true,
      width: 190,
    },
    {
      title: '上报时间',
      key: 'reportingTime',
      dataIndex: 'reportingTime',
      checked: true,
      width: 190,
    },
    {
      title: '上线时间',
      key: 'onlineTime',
      dataIndex: 'onlineTime',
      checked: true,
      width: 190,
    },
    {
      title: '切卡时间',
      key: 'switchingTime',
      dataIndex: 'switchingTime',
      checked: true,
      width: 190,
    },
    {
      title: '设备渠道',
      key: 'deviceChannel',
      dataIndex: 'deviceChannel',
      checked: true,
      width: 190,
    },
    {
      title: '设备备注',
      key: 'remarks',
      dataIndex: 'remarks',
      checked: true,
      width: 220,
    },
    {
      title: '操作',
      key: 'action',
      dataIndex: 'action',
      checked: true,
      width: 220,
      fixed: 'right',
    },
  ])

  function doRefresh(val?: any) {
    tableLoading.value = true
    if (val) {
      pagination.page = val
    }
    useCommon.deviceBand().then((res) => {
      deviceBandList.value = res.data
    })
    get({
      url: '/app/admin/device/get/list',
      data: () => {
        return {
          page: pagination.page,
          size: pagination.pageSize,
          ...deviceSeachForm.value,
        }
      },
    })
      .then((res) => {
        tableLoading.value = false

        res.data.list.forEach((item: any) => {
          //在用运营商
          const slot = item.slot
          const operator = item.wifiDeviceScheme.cardSlotArr.find(
            (slotObj: any) => slotObj.slot === slot
          )?.operator
          item.operatorType1 = useCommon.getOperatorType(operator)
          item.operator = operator
          //默认运营商
          const slots = item.wifiDeviceScheme.defaultSlot
          const operators = item.wifiDeviceScheme.cardSlotArr.find(
            (slotObj: any) => slotObj.slot === slots
          )?.operator
          item.operatorType2 = useCommon.getOperatorType(operators)
          if (item.wifiBand) {
            deviceBandList.value.forEach((items) => {
              if (item.wifiBand == items.key) {
                item.wifiBandName = items.name
              }
            })
          }
        })

        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }
  const seachForm = ref()
  //重置搜索项
  function resetSeach() {
    seachForm.value.resetFields()
    doRefresh(1)
  }

  //导出
  const loading = ref(false)

  const exportDeviceFn = () => {
    loading.value = true
    useCommon
      .downLoads('/app/device/channel/export', deviceSeachForm.value, '设备列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  //设备全部渠道
  const deviceChannel: any = ref()

  function getChannel() {
    useCommon.getDeviceChannel().then((res: any) => {
      deviceChannel.value = res.data
    })
  }

  //设备方案
  const deviceScheme: any = ref()

  function getScheme() {
    useCommon.getDeviceScheme().then((res: any) => {
      deviceScheme.value = res.data
    })
  }

  //卡槽系列
  const deviceSeries: any = ref()

  function getSeries() {
    useCommon.seriess().then((res: any) => {
      deviceSeries.value = res.data
    })
  }
  //入库
  const storeVisible = ref(false)

  const storeForm: any = ref({
    channelId: '',
    wifiDeviceScheme: {
      id: '',
      cardSlotArr: [],
    },
    remarks: '',
  })

  function openStore() {
    storeForm.value = {
      channelId: '',
      wifiDeviceScheme: {
        id: '',
        cardSlotArr: [],
      },
      remarks: '',
    }
    upLoading.value = false
    storeVisible.value = true
  }

  //下载入库模板
  function downloadStore() {
    window.location.assign('/web/resource/excel/设备入库.xlsx')
  }

  const fileList = ref([])

  const upLoading = ref(false)

  const sslU = ref()

  //上传文件成功
  function onSsl(fileItem: any) {
    upLoading.value = false
    Message.success(fileItem.response.msg)
    storeForm.value = {
      channelId: '',
      wifiDeviceScheme: {
        id: '',
        cardSlotArr: [],
      },
      remarks: '',
    }
    pollProgress(fileItem.response.data.taskId)
    fileList.value = []
  }

  //上传文件失败
  const onError = (fileItem: any) => {
    Message.error(fileItem.response.msg)
    fileList.value = []
    upLoading.value = false
  }

  //执行上传
  function submit() {
    upLoading.value = true
    sslU.value.submit()
  }

  //关闭上传弹窗
  function closeDown() {
    storeForm.value = {
      channelId: '',
      wifiDeviceScheme: {
        id: '',
        cardSlotArr: [],
      },
      remarks: '',
    }
    upLoading.value = false
    storeVisible.value = false
  }
  //切换方案
  function opNameFn(val: any) {
    const foundScheme = deviceScheme.value.find((item: any) => item.id === val)
    foundScheme.cardSlotArr.forEach((item: any) => {
      item.seriesId = ''
    })
    storeForm.value.wifiDeviceScheme = foundScheme
  }

  //设备刷新
  function RefreshFn(item: any, val: any) {
    get({
      url: '/app/admin/device/get/info',
      data: () => {
        return {
          id: item,
        }
      },
    })
      .then((res) => {
        if (res.data.cards) {
          res.data.cards.forEach((items: any) => {
            if (items.card) {
              get({
                url: '/app/card/refresh',
                data: () => {
                  return {
                    id: items.id,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  Message.success(res.msg)
                  if (val == 1) {
                    getDetail(item.id)
                  }
                  doRefresh()
                }
              })
            }
          })
        }
      })
      .catch(console.log)
  }
  //复机
  function startFn(item: any, val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要恢复此设备吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: '/app/card/start',
          data: () => {
            return {
              id: item,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Modal.warning({
              title: '操作报文',
              content: res.msg,
              cancelText: '取消',
              titleAlign: 'start',
              hideCancel: false,
              okText: '确定',
              onOk: () => {},
            })
            if (val == 1) {
              getDetail(item.id)
            }
            doRefresh()
          }
        })
      },
    })
  }
  //停机
  function stopFn(item: any, val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要停用此设备吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: '/app/card/stop',
          data: () => {
            return {
              id: item,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Modal.warning({
              title: '操作报文',
              content: res.msg,
              cancelText: '取消',
              titleAlign: 'start',
              hideCancel: false,
              okText: '确定',
              onOk: () => {},
            })
            if (val == 1) {
              getDetail(item.id)
            }
            doRefresh()
          }
        })
      },
    })
  }

  //关机
  function shutDownFn(item: any, val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定执行关机吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: '',
          data: () => {
            return {
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            if (val == 1) {
              getDetail(item.id)
            }
            doRefresh()
          }
        })
      },
    })
  }

  //重启
  function restartFn(item: any, val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定重启此设备吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: '/app/admin/device/wifi/restart',
          data: () => {
            return {
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            if (val == 1) {
              getDetail(item.id)
            }
            doRefresh()
          }
        })
      },
    })
  }

  //恢复出厂设置
  function factorySettingsFn(item: any, val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定恢复此设备的出厂设置吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: '/app/admin/device/wifi/init',
          data: () => {
            return {
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            if (val == 1) {
              getDetail(item.id)
            }
            doRefresh()
          }
        })
      },
    })
  }

  const deviceBandList = ref([])
  onMounted(async () => {
    await getChannel()
    await getScheme()
    await getSeries()
    await doRefresh()
  })
</script>

<style lang="less" scoped>
  .text1 {
    font-size: 15px;
  }
  .text2 {
    font-size: 13px;
    color: #86909c;
  }
  .box-top {
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
  }
  :deep(.arco-upload) {
    width: 100%;
  }

  .padding20 {
    padding: 0 20px;
  }

  .imgsa1 {
    width: 70px;
    height: 70px;
  }

  .box {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 5px 10px 10px 0px;

    .line {
      width: 4px;
      height: 15px;
      margin-right: 8px;
      background-color: #40a1ff;
    }
    .text {
      display: flex;
      align-items: center;
    }
  }

  .display-box {
    display: flex;
    .display-right {
      margin-left: 20px;
      .text {
        font-size: 14px;
        color: #86909c;
        line-height: 23px;
      }
      .text-name {
        font-size: 15px;
        line-height: 25px;
        display: flex;
        align-items: center;
      }
    }
  }

  .demo-item {
    .text-name {
      color: #86909c;
      font-size: 14px;
    }
    .text-info {
      font-size: 16px;
      display: flex;
      margin-top: 10px;
      align-items: center;
    }
  }
  .tabs-button {
    margin-top: 20px;
    :deep(.arco-radio-button-content) {
      width: calc(980px / 3);
      line-height: 35px;
      text-align: center;
      height: 35px;
    }
    :deep(.arco-radio-button.arco-radio-checked) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }
    :deep(.arco-radio-button:hover) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }
  }
  .col-div {
    margin-top: 20px;
    padding: 0 20px;
    margin-bottom: 20px;
  }
  .col-div .arco-col {
    margin-bottom: 10px;
  }
  .ba {
    display: flex;
    align-items: center;
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: none;
    }
  }

  .ba:hover {
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: block;
      width: 18px;
    }
  }
  .imgsa {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  .imgRadio {
    vertical-align: middle;
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .operatorClass {
    .custom-radio-card {
      display: flex;
      align-items: center;
      border-radius: 5px;
      padding: 5px 10px;
      border: 1px solid #f2f3f5;
      background-color: #f2f3f5;
    }

    .custom-radio-card-checked {
      border: 1px solid #3491fa;
      background-color: #e8f7ff;
    }
  }

  .pilianglokolo {
    :deep(.arco-tabs-tab) {
      padding: 0px !important;
      margin-right: 10px;
    }
    :deep(.arco-tabs-tab-active) {
      background-color: #e8f7ff !important;
    }
    :deep(.arco-tabs-nav-ink) {
      background-color: transparent !important;
    }

    :deep(.arco-tabs-tab-title:hover) {
      padding: 5px 20px !important;
      padding-right: 10px !important;
      margin-right: 10px !important;
    }
    :deep(.arco-tabs-tab-title) {
      padding: 5px 20px !important;
      width: calc(100% - 10px);
    }
    // :deep(.arco-tabs-nav-tab-list) {
    //   margin-right: 10px !important;
    // }
  }

  :deep(.arco-radio) {
    padding-left: 0;
  }
</style>
